<template>
  <div>
    <el-form :model="form" inline>

      <el-form-item label="账号平台:">
        <el-select v-model="form.procurementPlatformId" style="width: 120px;">
          <el-option label="全部" :value="0" />
          <el-option :label="item.value" :value="item.key" v-for="item in store.procurementPlatformDicTable"
            :key="item.key" />
        </el-select>
      </el-form-item>
      <el-form-item label="账号名称:">
        <el-select v-model="form.procurementPlatformUid" style="width: 120px;">
          <el-option :label="item.account" :value="item.id" v-for="item in store.accountNumberTab" clearable
            :key="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="账号状态:">
        <el-select v-model="form.procurementAccountStatusId">
          <el-option label="全部" :value="0" />
          <el-option :label="item.value" :value="item.key" v-for="item in store.procurementAccountStatusDicTable"
            :key="item.key" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="onSubmit">搜索</el-button>
        <el-button type="primary" @click="saveInformation">添加账号</el-button>
        <el-button type="primary" @click="saveInformations">(测试)添加账号</el-button>
        <el-button type="primary" @click="upload">导出账号信息</el-button>
        <el-button type="primary" @click="setType">批量修改类型</el-button>
        <el-button type="primary" @click="DroppedCallNotificationBtn">批量设置掉线通知</el-button>
        <el-button type="primary" @click="removeAcc(multipleSelection)">批量删除</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div class="table">
    <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange"
      border>
      <el-table-column type="selection" width="55" />
      <el-table-column label="账号名" width="180">
        <template #default="scope">{{ scope.row.account }}</template>
      </el-table-column>
      <el-table-column label="添加时间" width="180">
        <template #default="scope">{{ scope.row.createTime }}</template>
      </el-table-column>
      <el-table-column label="更新时间" width="180">
        <template #default="scope">{{ scope.row.updateTime }}</template>
      </el-table-column>
      <el-table-column label="账号状态" width="180">
        <template #default="scope">{{ scope.row.procurementAccountStatusName }}</template>
      </el-table-column>
      <el-table-column label="账号使用人" width="180">
        <template #default="scope">{{ scope.row.subAdminName }}</template>
      </el-table-column>
      <el-table-column label="账号类型" width="180">
        <template #default="scope">{{ scope.row.type == 1 ? '程序' : '人工' }}</template>
      </el-table-column>
      <el-table-column label="是否默认" width="180">
        <template #default="scope">{{ scope.row.accountDefault ? '是' : '否' }}</template>
      </el-table-column>
      <el-table-column label="采购平台" width="120">
        <template #default="scope">{{ scope.row.procurementPlatformName }}</template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button link type="primary" size="small" @click.prevent="procurementAccountcancelDefaultBtn(scope.row.id)"
            v-if="scope.row.accountDefault">
            取消默认
          </el-button>
          <el-button link type="primary" size="small" @click.prevent="procurementAccountupdateDefaultBtn(scope.row.id)"
            v-else>
            设为默认
          </el-button>
          <el-button link type="primary" size="small" @click.prevent="updateInformation(scope.row)">
            更新
          </el-button>
          <el-button link type="primary" size="small" @click.prevent="editorBtn(scope.row)">
            编辑
          </el-button>
          <el-button link type="primary" size="small" @click.prevent="removeAcc(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div class="page">
    <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :page-sizes="[10, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />
  </div>
  <!-- 修改类型 -->
  <div>
    <el-dialog v-model="TypeDialogVisible" width="300">
      <span>
        <el-select v-model="TypeName" placeholder="请选择" size="large" style="width: 240px">
          <el-option label="人工" :value="0" />
          <el-option label="程序" :value="1" />
        </el-select>
      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="TypeDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmType">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
  <!-- 编辑 -->
  <div>
    <el-dialog v-model="compileContent" width="600">
      <span>
        <el-form :model="compileContentForm" style="max-width: 600px" inline>
          <el-form-item label="账号名称：">
            <el-input v-model="names" style="width:100px" disabled="true" />
          </el-form-item>
          <el-form-item label="类型">
            <el-select v-model="compileContentForm.type" placeholder="请选择" size="large" style="width: 100px">
              <el-option label="人工" :value="0" />
              <el-option label="程序" :value="1" />
            </el-select>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="compileContentForm.procurementAccountStatusId" placeholder="请选择" size="large"
              style="width: 100px">
              <!-- <el-option label="全部" :value="0" /> -->
              <el-option :label="item.value" :value="item.key" v-for="item in store.procurementAccountStatusDicTable"
                :key="item.key" />
            </el-select>
          </el-form-item>
          <el-form-item label="掉线后通知用户">
            <div style="max-height: 300px;overflow-y: auto; /* 垂直方向上出现滚动条 */">
              <el-checkbox-group v-model="checkListcompileContentForm" value-key="key">
                <el-checkbox :label="item.id" :value="item.id" v-for="item in store.accountNumberTab" :key="item.id">{{
                  item.name }}</el-checkbox>
              </el-checkbox-group>
            </div>
          </el-form-item>
        </el-form>

      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="compileContent = false">取消</el-button>
          <el-button type="primary" @click="confirmCompileContent">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
  <!-- 掉线通知 -->
  <div>
    <el-dialog v-model="DroppedCallNotification" width="600">
      <span>
        <div style="max-height: 600px;overflow-y: auto; /* 垂直方向上出现滚动条 */">
          <el-checkbox-group v-model="checkListDroppedCallNotification">
            <el-checkbox :label="item.id" :value="item.id" v-for="item in store.accountNumberTab" :key="item.id">{{
              item.name }}</el-checkbox>
          </el-checkbox-group>
        </div>
      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="DroppedCallNotification = false">取消</el-button>
          <el-button type="primary" @click="confirmDroppedCallNotification">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
  <div>
    <el-dialog v-model="TOKENSetDiaog" width="400">
      <span>
        <el-form :model="TOKENSetDiaogForm" style="max-width: 600px">
          <el-form-item label="token：">
            <el-input v-model="TOKENSetDiaogForm.token" style="width:200px" />
          </el-form-item>
          <el-form-item label="账号名：">
            <el-input v-model="TOKENSetDiaogForm.account" style="width:200px" />
          </el-form-item>
          <el-form-item label="采购平台:">
            <el-select v-model="TOKENSetDiaogForm.procurementPlatformId">
              <el-option :label="item.value" :value="item.key" v-for="item in store.procurementPlatformDicTable"
                :key="item.key" />
            </el-select>
          </el-form-item>
          <el-form-item label="账号状态:">
            <el-select v-model="TOKENSetDiaogForm.procurementAccountStatusId" placeholder="请选择" size="large"
              style="width: 100px">
              <!-- <el-option label="全部" :value="0" /> -->
              <el-option :label="item.value" :value="item.key" v-for="item in store.procurementAccountStatusDicTable"
                :key="item.key" />
            </el-select>
          </el-form-item>

        </el-form>
      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="TOKENSetDiaog = false">取消</el-button>
          <el-button type="primary" @click="TOKENSetDiaogSUbmint">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
  <!-- 测试 -->
  <div>
    <el-dialog v-model="TOKENSetDiaogs" width="400">
      <span>
        <el-form :model="TOKENSetDiaogForm" style="max-width: 600px">
          <el-form-item label="采购平台:">
            <el-select v-model="TOKENSetDiaogForm.procurementPlatformId">
              <el-option :label="item.value" :value="item.key" v-for="item in store.procurementPlatformDicTable"
                :key="item.key" />
            </el-select>
          </el-form-item>
        </el-form>
      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="TOKENSetDiaogs = false">取消</el-button>
          <el-button type="primary" @click="TOKENSetDiaogSUbmints">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
  <div>
    <el-dialog v-model="updataTokenDiaog" width="400">
      <span>
        <el-form :model="updataForm" style="max-width: 600px">
          <el-form-item label="token：">
            <el-input v-model="updataForm.token" style="width:200px" />
          </el-form-item>
        </el-form>
      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="updataTokenDiaog = false">取消</el-button>
          <el-button type="primary" @click="submitupdataTokenDiaog">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onBeforeMount } from 'vue'
import { procurementAccountlist, procurementAccountremove, procurementAccountUpdateType, procurementAccountexport, procurementAccountupdateOfflineNotice, procurementAccountUpdate, procurementAccountcreate, procurementAccountupdateToken, procurementAccountupdateDefault, procurementAccountcancelDefault, accountAddaskcreat } from '@/api/index'
import { useAlertsStore } from '@/store/index'
import { ElMessage } from 'element-plus'
// import axios from 'axios'

const store = useAlertsStore()
// do not use same name with ref
const form = ref({
  pageSize: 10,
  pageNum: 1,
  procurementPlatformId: 0,
  procurementPlatformUid: '',
  account: '',
  procurementAccountStatusId: 0
})
onBeforeMount(() => {
  store.getAcc(form.value.procurementPlatformId)
  store.procurementPlatformDicApi()
  store.procurementAccountStatusDicApi()
  getList()
})
// const getPeople = () => {
//   store.getAcc(form.value.procurementPlatformId)
// }
const tableData = ref([])

const onSubmit = () => {
  form.value.pageNum = 1
  console.log('submit!')
  getList()
}
const getList = () => {
  procurementAccountlist(form.value).then(res => {
    const { data: { data } } = res
    total.value = data.total
    tableData.value = data
  })
}
// 分页
const currentPage4 = ref(1)
const pageSize4 = ref(10)
const total = ref(0)
const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
  form.value.pageSize = val
  getList()
}
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
  form.value.pageNum = val
  getList()
}

// table
const multipleSelection = ref([])
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}

// 添加账号
const saveInformation = () => {
  TOKENSetDiaog.value = true
}
// 测试账号
const saveInformations = () => {
  TOKENSetDiaogs.value = true
}

// 更新账号
const Nowids = ref('')
const updateInformation = (row) => {
  Nowids.value = row.id
  updataTokenDiaog.value = true
}

// 删除
const removeAcc = (row) => {
  console.log(Object.prototype.toString.call(row))
  const a = { ids: [] }
  if (Object.prototype.toString.call(row) === '[object Object]') {
    procurementAccountremove({ ids: [row.id] }).then(res => {
      ElMessage.success('操作成功')
      getList()
    })
  } else if (Object.prototype.toString.call(row) === '[object Array]') {
    if (row.length > 0) {
      row.forEach(element => {
        a.ids.push(element.id)
      })
      procurementAccountremove(a).then(res => {
        ElMessage.success('操作成功')
        getList()
      })
    } else {
      ElMessage.error('请先选择数据')
    }
  }
}

// 修改类型
const TypeDialogVisible = ref(false)
const TypeName = ref('')
const setType = () => {
  TypeDialogVisible.value = true
}
const confirmType = () => {
  const id = []
  if (multipleSelection.value.length > 0) {
    multipleSelection.value.forEach(e => {
      id.push(e.id)
    })
    procurementAccountUpdateType({
      type: TypeName.value,
      procurementAccountIdList: id
    }).then(res => {
      ElMessage.success('修改成功')
      TypeDialogVisible.value = false
      getList()
    })
  } else {
    ElMessage.error('请先选择数据')
  }
}

// 编辑
const compileContent = ref(false)
const names = ref('')
const procurementAccountId = ref('')
const compileContentForm = ref({
  type: '',
  procurementAccountStatusId: 0,
  procurementAccountOfflineNoticeDtoList: [
    // {
    //   adminId: 0,
    //   adminName: ''
    // }
  ]
})
const editorBtn = (row) => {
  procurementAccountId.value = row.id
  names.value = row.account
  compileContentForm.value.type = row.type
  compileContentForm.value.procurementAccountStatusId = row.procurementAccountStatusId.toString()
  compileContent.value = true
  console.log(Number(row.procurementAccountStatusId))
  console.log(compileContentForm.value.procurementAccountStatusId)
}
// 掉线通知
const DroppedCallNotification = ref(false)
const checkListcompileContentForm = ref([])
const checkListDroppedCallNotification = ref([])
const DroppedCallNotificationBtn = () => {
  DroppedCallNotification.value = true
}
const arrs = ref([])
const objs = ref([])
const confirmDroppedCallNotification = () => {
  arrs.value = []
  objs.value = []
  if (multipleSelection.value.length > 0) {
    multipleSelection.value.forEach(e => {
      arrs.value.push(e.id)
    })
    store.accountNumberTab.forEach(e => {
      if (checkListDroppedCallNotification.value.includes(e.id)) {
        const b = {
          adminId: 0,
          adminName: ''
        }
        b.adminId = e.id
        b.adminName = e.name
        objs.value.push(b)
      }
    })

    procurementAccountupdateOfflineNotice({
      procurementAccountOfflineNoticeDtoList: objs.value,
      procurementAccountIdList: arrs.value
    }).then(res => {
      ElMessage.success('操作成功')
      DroppedCallNotification.value = false
    })
  } else {
    ElMessage.error('请先选择数据')
  }
}
// 导出
const upload = () => {
  procurementAccountexport(form.value).then(res => {
    const { data: { data } } = res
    console.log(`${data.fileDownPath}`)
    window.open(
      'http://47.96.159.1:18889/procurement/procurementAccount/download' + data.fileDownPath
    )
    // const encodedPath = encodeURIComponent(data.fileDownPath)
    // procurementAccountdownload(data.fileDownPath)
  })
}
// 确定编辑
const confirmCompileContent = () => {
  objs.value = []
  store.accountNumberTab.forEach(e => {
    if (checkListcompileContentForm.value.includes(e.id)) {
      const b = {
        adminId: 0,
        adminName: ''
      }
      b.adminId = e.id
      b.adminName = e.name
      console.log('zhaodaol')
      console.log(b)
      objs.value.push(b)
      console.log(objs.value)
      compileContentForm.value.procurementAccountOfflineNoticeDtoList = objs.value
    }
  })
  procurementAccountUpdate(procurementAccountId.value, compileContentForm.value).then(res => {
    ElMessage.success('操作成功')
    getList()
    compileContent.value = false
  })
}

const TOKENSetDiaog = ref(false)
const TOKENSetDiaogForm = ref({})
const TOKENSetDiaogSUbmint = () => {
  procurementAccountcreate(TOKENSetDiaogForm.value).then(res => {
    TOKENSetDiaog.value = false
    ElMessage.success('添加成功')
    getList()
  })
}
const updataForm = ref({})
const updataTokenDiaog = ref(false)
const submitupdataTokenDiaog = () => {
  procurementAccountupdateToken(Nowids.value, updataForm.value).then(res => {
    ElMessage.success('操作成功')
    updataTokenDiaog.value = false
  })
}
// 设默认
const procurementAccountupdateDefaultBtn = (row) => {
  procurementAccountupdateDefault(row).then(res => {
    ElMessage.success('操作成功')
    getList()
  })
}
// qu默认
const procurementAccountcancelDefaultBtn = (row) => {
  procurementAccountcancelDefault(row).then(res => {
    ElMessage.success('操作成功')
    getList()
  })
}
const TOKENSetDiaogs = ref(false)
const TOKENSetDiaogSUbmints = () => {
  accountAddaskcreat(TOKENSetDiaogForm.value.procurementPlatformId).then(res => {
    const { data: { data } } = res
    location.href = `cg://purchase?taskType=addaccount&api=${data}`
  })
}
</script>

<style lang='less' scoped></style>
